<template>
  <div class="user">
    <search-user ref="searchUser" @search="search" @output="output"></search-user>
    <div class="pageBox">
      <el-pagination
        background
        layout="total"
        :total="total"
        style="display:inline-block;vertical-align: top;"
      ></el-pagination>
      <!-- <el-button type="success" size="small" icon="el-icon-circle-plus" @click="add">新增</el-button>
      <el-button type="info" size="small" plain icon="el-icon-tickets">导出表格</el-button>-->
    </div>
    <el-table border :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
      <el-table-column prop="userID" align="center" label="用户ID号"></el-table-column>
      <el-table-column prop="nickName" align="center" label="用户昵称"></el-table-column>
      <el-table-column prop="mobile" align="center" label="手机号"></el-table-column>
      <!-- <el-table-column prop="province" align="center" label="省"></el-table-column>
      <el-table-column prop="city" align="center" label="市"></el-table-column>-->
      <el-table-column prop="gender" align="center" label="性别">
        <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.gender==='1'">女</el-tag>
            <el-tag size="small" v-else>男</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="purchaseTimes" align="center" label="购买次数"></el-table-column>
      <el-table-column prop="totalAmount" align="center" label="成交总金额"></el-table-column>
      <el-table-column prop="refund" align="center" label="退款次数"></el-table-column>
      <el-table-column prop="createTime" align="center" label="注册时间"></el-table-column>
      <el-table-column prop="role" align="center" label="是否为推广员">
        <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.role==='1'">是</el-tag>
            <el-tag size="small" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="info" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="detail(scope.row.userID)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      class="dialog"
      title="用户详情"
      width="750px"
      top="8vh"
      :visible.sync="dialog"
      :modal-append-to-body="false"
    >
    <div class="row">
      <div class="row-item">
        <div class="key">用户ID</div>
        <div class="value">{{item.userID}}</div>
      </div>
      <div class="row-item">
        <div class="key">用户昵称</div>
        <div class="value">{{item.nickName}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">手机号</div>
        <div class="value">{{item.mobile}}</div>
      </div>
      <div class="row-item">
        <div class="key">性别</div>
        <div class="value"><el-tag size="small" v-if="item.gender==='1'">女</el-tag>
            <el-tag size="small" v-else>男</el-tag></div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">购买次数</div>
        <div class="value">{{item.purchaseTimes}}</div>
      </div>
      <div class="row-item">
        <div class="key">成交总金额</div>
        <div class="value">{{item.totalAmount}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">是否是推广员</div>
        <div class="value"><el-tag size="small" v-if="item.role==='1'">是</el-tag>
            <el-tag size="small" v-else>否</el-tag>
        </div>
      </div>
    
      <div class="row-item">
        <div class="key">创建时间</div>
        <div class="value">{{item.createTime}}</div>
      </div>
    </div>

    </el-dialog>
  </div>
</template>

<script>
import SearchUser from '@/components/SearchUser'
import { queryUser,userList,getUserDetail } from '@/api'
export default {
  name: 'user',
  components: {
    SearchUser
  },
  data() {
    return {
      total: 4,
      tableData: [],
      item:{},
      dialog:false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      userList().then((res) => {
        console.log(res)
        this.loading = false
        this.total = res.length
        this.tableData = res
      })
    },
    detail(id) {
      getUserDetail(id).then(res => {
        this.item = res
        this.dialog = true
        console.log(res)
      })

    },
    search(data) {
      this.loading = true

      queryUser(data).then((res) => {
        this.loading = false
        this.total = res.length
        this.tableData = res
      })
    },
    output() {

    }
  }
}
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin.styl'
.row
  width 100%
  flex-row()
  .row-item
    flex 1
    line-height 30px
    display flex
    .key
      margin-right 10px
    .value
      color #f90
</style>